<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
 .m-player {
  width: 266px;
  height: 479px;
  background: url(../img/home/page1-bannerbg1.png) no-repeat;
  position: absolute;
  right: 50%;
  top: 10%;
}
.m-player .m-item {
  background: white;
  width: 221px;
  height: 189px;
  padding: 0 8px;
  overflow: hidden;
}
.m-player .m-list {
margin:0px;
padding:0px;
  width: 221px;
}
.m-player .m-hd {
 
  font-size: 22px;
  color: #f96046;
margin:0px;
  width: 100%;
  background: #fff;
  font-family: "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53";
  text-align: center;
  line-height: 50px;
  border-bottom: 2px solid #FCAFA2;
}
.m-player li {
  font-family: "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53";
  line-height: 22px;
  height: 40px;
  padding: 11px 0px;
  border-bottom: 1px dashed #FEC2B2;
  list-style-type:none;
}
.m-player li h3 {
  font-weight: normal;
  font-size: 14px;
  color: #333131;
  margin:0px;
}
.m-player li img {
  float: left;
  display: block;
  width: 36px;
  height: 36px;
  border: 2px solid #fec2b2;
  border-radius: 50%;
  margin-right: 10px;
}
.m-player li p {
  font-size: 12px;
  color: #646464;
  margin:0px;
}
    </style>
</head>
<body>
    <div id="J_Slider" class="m-player">
    <p class="m-hd">补贴动态</p>
    <div id="J_item" class="m-item">
        
        <ul id="J_list" class="m-list" >
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯1</h3>
                <p>完成《百度搜索》赚了1.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯2</h3>
                <p>完成《百度搜索》赚了2.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯3</h3>
                <p>完成《百度搜索》赚了3.0元</p>
            </li>
            <!-- <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯4</h3>
                <p>完成《百度搜索》赚了4.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯5</h3>
                <p>完成《百度搜索》赚了1.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯6</h3>
                <p>完成《百度搜索》赚了1.0元</p>
            </li> -->
        </ul>
    </div>                 
</div>
<script type="text/javascript">
window.onload=function (){
    //     function startmarquee(lh,speed,delay) {
    //     var iSpeed=-1;
    //     var timer;
    //     var oUl=document.getElementById("J_list");
    //     oUl.innerHTML+=oUl.innerHTML;
    //     oUl.style.marginTop=0;
        
    //     function start(){
    //     timer=setInterval(scrolling,speed);
		  //   oUl.onmouseover=function(){clearInterval(timer)}
    //     oUl.onmouseout=function(){timer=setInterval(scrolling,speed);}
    //     }
		  //   console.log(oUl.offsetHeight)
    //     function scrolling(){
		  // 	oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
			 // if(parseInt(oUl.style.marginTop)<=-1*oUl.scrollHeight/2){
				// oUl.style.marginTop=0	
			 // }
        
    //     }
    //     setTimeout(start,delay);
    //     }
    // startmarquee(63,10,1500);

        function startmarquee(lh,speed,delay) {

          var iSpeed=-1;
          var timer;
          var oUl=document.getElementById("J_list");
          oUl.innerHTML+=oUl.innerHTML;
          oUl.style.marginTop=0;
          function start(){
          timer=setInterval(scrolling,speed);
          oUl.onmouseover=function(){clearInterval(timer)}
          oUl.onmouseout=function(){timer=setInterval(scrolling,speed);}
          oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
          }
          function scrolling(){
            if(parseInt(oUl.style.marginTop)%lh!=0){
            oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
            if(Math.abs(parseInt(oUl.style.marginTop))>=oUl.scrollHeight/2) oUl.style.marginTop=0;
            }else{
            clearInterval(timer);
            setTimeout(start,delay);
            }
            }
     
          setTimeout(start,delay);
          }
        startmarquee(63,10,1500);


        }
</script>
</body>
</html>